<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title id="divTitle">创建用户</title>
  <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />

  <style type="text/css">
    /*字体样式*/
    *, body {
      margin: 0px;
      font-family: '微软雅黑';
    }
    /*超链接样式*/
    a:link{
      color:red;
    }
    a:visited{
      color:#008000;
    }
    a:active{
      color:cadetblue;
    }
    a:hover{
      color: #a71d5d;
    }
  </style>
  <script th:src="@{/js/jquery-1.10.2.min.js}"></script>
  <script th:src="@{/js/jquery.form.js}"></script>
  <script th:src="@{/js/generic.js}"></script>
</head>

<body>
<!--<div th:replace="top :: top"></div>-->
<form id="filePost" method="post" enctype="multipart/form-data" onsubmit="return false;">
  <table class="maintable">
    <tr>
      <td class="rightmaintd" valign="top">
<!--        返回的超链接-->
        <div style="width:920px;margin:10px auto;"> <a href="/user">&lt 返回</a> </div>
<!--        创建用户的表单-->
        <table class="logintable" cellpadding="8" style="margin-top:20px;">
          <tr>
            <td width="100">用户名</td>
            <td><input type="text" id="userid" class="logininput" disabled="disabled" th:value="${yonghu.getUserid()}"></td>
          </tr>
          <tr>
            <td>姓&nbsp;&nbsp;&nbsp;名</td>
            <td><input type="text" id="username" class="logininput" th:value="${yonghu.getUsername()}"></td>
          </tr>
          <tr>
            <td>密&nbsp;&nbsp;&nbsp;码</td>
            <td><input type="password" id="password" class="logininput" th:value="${yonghu.getPassword()}"></td>
          </tr>
          <tr>
            <td valign="middle">用户头像</td>
            <td style="padding-left:50px;">
              <img th:src="${image}" id="img" alt="" class="userheadpic" > <br />
<!--              uploadImages/${yonghu.getImage()}-->
              <div class="fileUpload">
                <span id="spSmallImage">上传头像</span>
                <input type="file" id="smallfile" name="smallfile" class="upload" onchange="previewImage()"/>
                <input type="hidden" id="hidSmallPic" value="" />
              </div>
            </td>
          </tr>
          <tr>
            <td>用户类型</td>
            <td>
              <select id="role" maxlength="50" class="logininput">
                <option value="二级审核" th:selected="${yonghu.getType()}=='二级审核'">二级审核</option>
                <option value="教师审核" th:selected="${yonghu.getType()}=='教师审核'">教师审核</option>
                <option value="名医专家" th:selected="${yonghu.getType()}=='名医专家'">名医专家</option>
                <option value="学生" th:selected="${yonghu.getType()}=='学生'">学生</option>
                <option value="管理员" th:selected="${yonghu.getType()}=='管理员'">管理员</option>
                <option value="门诊病历录入" th:selected="${yonghu.getType()}=='门诊病历录入'">门诊病历录入</option>
                <option value="名医专家+审核者" th:selected="${yonghu.getType()}=='名医专家+审核者'">名医专家+审核者</option>
                <option value="中药+方剂录入" th:selected="${yonghu.getType()}=='中药+方剂录入'">中药+方剂录入</option>
                <option value="审核者" th:selected="${yonghu.getType()}=='审核者'">审核者</option>
                <option value="输入者" th:selected="${yonghu.getType()}=='输入者'">输入者</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>选择团队</td>
            <td>
              <select id="teamName" maxlength="50" class="logininput" onchange="searchTeam()">
                <option value="" th:selected="${yonghu.getTeamName()==''}"> </option>
                <option th:each="tname : ${teamname}" th:value="${tname}" th:text="${tname}" th:selected="${yonghu.getTeamName()==tname}">tname</option>
              </select>
<!--              <input type="text" id="teamName" class="logininput" onchange="searchTeam()" th:value="${yonghu.getTeamName()}">-->
            </td>
          </tr>
          <tr>
            <td>联系电话</td>
            <td><input type="text" id="tel" class="logininput" th:value="${yonghu.getTel()}"></td>
          </tr>
          <tr>
            <td>电子邮箱</td>
            <td><input type="text" id="email" class="logininput" th:value="${yonghu.getEmail()}"></td>
          </tr>
          <tr>
            <td>院系单位</td>
            <td><input type="text" id="company" class="logininput" th:value="${yonghu.getCompany()}"></td>
          </tr>
          <tr>
            <td>联系地址</td>
            <td><input type="text" id="addr" class="logininput" th:value="${yonghu.getAddr()}"></td>
          </tr>
        </table>
        <div class="shenhediv">
          <input type="button" value="保 &nbsp; &nbsp; 存" class="baocunbtn3"  id="Sbutton" onclick="save()">
          <span id="lrxx"></span>
          <span id="Id" th:text="${yonghu.getUserid()}" class="shownone">Id</span>
        </div>
      </td>
    </tr>
  </table>
</form>
<!--<div th:replace="bottom :: bottom"></div>-->

</body>
</html>
<script type="text/javascript">
  var p=document.getElementById('img');
  console.log(p);
  function previewImage() {
    var preview = document.getElementById('img');
    var fileDom = document.getElementById('smallfile');
    // 获取得到file 对象
    var file = fileDom.files[0]
    // 限制上传图片的大小
    if(file.size > 1024 * 1024 * 5) {
      alert('图片大小不能超过 5MB!');
      return false;
    }
    // 创建url
    var imgUrl = window.URL.createObjectURL(file)
    preview.setAttribute("src", imgUrl)
    // 更改img url 以后释放 url
    preview.onload = function() {
      console.log('图片加载成功')
      URL.revokeObjectURL(imgUrl)//安全性，释放URL
    }
  }
  // 保存按钮点击事件处理函数
  function save(){
    // var id=document.getElementById('Id').textContent;
    var useridValue = document.getElementById('userid').value;
    if(useridValue==""){
      alert("请输入用户名！");
      return;
    }
    var usernameValue = document.getElementById('username').value;
    if(usernameValue=="") {
      alert("请输入姓名！");
      return;
    }
    var passwordValue = document.getElementById('password').value;
    if(passwordValue==""){
      alert("请输入密码！");
      return;
    }
    var roleValue = document.getElementById('role').value;
    if(roleValue=="")
      roleValue=null
    var teamNameValue = document.getElementById('teamName').value;
    if(teamNameValue=="")
      teamNameValue=null
    var telValue = document.getElementById('tel').value;
    if(telValue=="")
      telValue=null
    var emailValue = document.getElementById('email').value;
    if(emailValue=="")
      emailValue=null
    var companyValue = document.getElementById('company').value;
    if(companyValue=="")
      companyValue=null
    var addrValue = document.getElementById('addr').value;
    if(addrValue=="")
      addrValue=null
    // 创建要发送的数据对象
    var data = {
      userid: useridValue,
      username: usernameValue,
      password: passwordValue,
      type: roleValue,
      teamName: teamNameValue,
      tel: telValue,
      email: emailValue,
      company: companyValue,
      addr: addrValue
    };
    // 创建要发送的数据对象，不包括文件
    console.log(data);
    var formData =new FormData();
    formData.append('user',JSON.stringify(data));
    formData.append('smallfile', document.getElementById('smallfile').files[0]);
    // 发送 POST 请求
    fetch('/user/', {
      method: 'PUT',
      body: formData,
    })
            .then(response => response.json())
            .then(() => {
              alert("创建成功！");
              window.location.href="/user";
            })
            .catch(error => {
              console.log(error);
              alert("创建成功！");   //其实这个是有问题的，但是能正常创建
              window.location.href="/user";
            });

  }
</script>

